<template>
  <div id="questionsTable">
    <el-table :data="tablesData" style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="120">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="120">
      </el-table-column>
      <el-table-column label="题型" width="120">
        <template v-slot="{ row }">
          {{ row.questionType | numberTransformText(questionType) }}
        </template>
      </el-table-column>
      <el-table-column label="题干" width="280">
        <template v-slot="{ row }">
          {{ row.question | html2Text }}
        </template>
      </el-table-column>
      <el-table-column label="录入时间" width="180">
        <template v-slot="{ row }">
          {{ row.addDate | parseTimeByString }}
        </template>
      </el-table-column>
      <el-table-column label="难度" width="80">
        <template v-slot="{ row }">
          {{ row.difficulty | numberTransformText(difficulty) }}
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="120">
      </el-table-column>
      <el-table-column prop="chkState" label="审核状态" width="120">
        <template v-slot="{ row }">
          {{ row.chkState | numberTransformText(chkType) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="chkRemarks"
        label="审核意见"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="chkUser"
        label="审核人"
        width="120"
      ></el-table-column>
      <el-table-column label="发布状态" width="150">
        <template v-slot="{ row }">
          {{ releaseState(row) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template v-slot="{ row }">
          <el-button type="text" @click="preview(row)" size="small"
            >预览</el-button
          >
          <el-button
            type="text"
            :disabled="!!row.chkState"
            size="small"
            @click="review(row)"
            >审核</el-button
          >
          <el-button type="text" :disabled="!!row.publishState" size="small" @click="$router.push('/questions/new?id=' + row.id)">修改</el-button>
          <el-button type="text" size="small" @click="onShelves(row)">{{row.publishState == 0 ? '上架' : '下架'}}</el-button>
          <el-button type="text" :disabled="!!row.publishState" size="small" @click="removeRow(row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <QuestionsPagination @pagination="list = $event" :counts="counts" />
    <QuestionsDialog
      v-if="questionsVisible"
      :tableRow="tableRow"
      :questionsVisible.sync="questionsVisible"
    />
    <!-- 审核对话框 -->
    <el-dialog title="提示" :visible.sync="reviewVisible" width="30%">
      <el-radio v-model="chkState" :label="1">通过</el-radio>
      <el-radio v-model="chkState" :label="2">拒绝</el-radio>
      <el-input
        class="textarea"
        type="textarea"
        :rows="2"
        placeholder="请输入审核意见"
        v-model="chkRemarks"
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="reviewVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { remove, choiceCheck, choicePublish } from '@/api/hmmm/questions'
import QuestionsDialog from './questions-dialog.vue'
import {
  questionType,
  difficulty,
  chkType
} from '@/api/hmmm/constants'
import QuestionsPagination from './questions-pagination.vue'
export default {
  name: 'QuestionsTable',
  data () {
    return {
      questionType,
      difficulty,
      chkType,
      questionsVisible: false,
      tableRow: {},
      reviewVisible: false, // 审核对话框
      chkState: 1,
      chkRemarks: '',
      currentRow: 0,
      list: {
        page: 1,
        pagesize: 5
      }
 
    }
  },
  props: {
    counts: {
      type: Number,
      required: true
    },
    tablesData: {
      type: Array,
      required: true
    }
  },
  components: {
    QuestionsPagination,
    QuestionsDialog
  },
  // 定义方法
  methods: {
    preview (row) {
      this.questionsVisible = true
      this.tableRow = row
    },
    // 删除
    removeRow (row) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: row.id })
          this.$message.success('删除成功！')
          this.$emit('loadTableData')
        })
        .catch(() => {})
    },
    review (row) {
      this.reviewVisible = true
      this.currentRow = row
    },
    async onSave () {
      if (this.chkRemarks) {
        try {
          await choiceCheck({
            chkRemarks: this.chkRemarks,
            chkState: this.chkState,
            id: this.currentRow.id
          })
          this.reviewVisible = false
          this.$emit('loadTableData')
        } catch (err) {}
      } else {
        this.$message.warning('请输入审核意见')
      }
    },
    onShelves (row) {
      this.$confirm('您确认' + (row.publishState ? '下' : '上') + '架这道题目吗?, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (row.publishState) {
          row.publishState = 0
        } else {
          row.publishState = 1
        }
        await choicePublish(row)
        this.$emit('loadTableData')
        this.$message.success('成功！')
      }).catch(() => {})
    },
    // 判断发布状态
    releaseState (row) {
      if (row.publishState === 1 && row.chkState === 1) {
        return '已发布'
      } else if (row.publishState === 0 && row.chkState === 1) {
        return '已下架'
      } else {
        return '待发布'
      }
    }
  },
  watch: {
    list: {
      deep: true,
      handler () {
        this.$emit('paginationTab', this.list)
      }
    }
  }
}
</script>

<style scoped lang="less">
.textarea {
  margin-top: 20px;
}
</style>
